<template>
  <div class="monitor-box">
    <div class="left-box">
      <div class="control-box">
        <div class="search-box box-shadow">
          <a-form>
            <a-form-item label="标段">
              <a-select
                  v-model:value="cellQueryFormState.sections[0].sectionId"
                  @change="((val) => {changeSelect(val)})">
                <a-select-option
                    v-for="section in sections"
                    :key="section.sectionId"
                    :value="section.sectionId">
                  {{ section.sectionName }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="仅显示当日施工单元">
              <a-switch
                  :defaultChecked="cellQueryFormState.workToday == 1"
                  @change="() => {
                    cellQueryFormState.workToday = cellQueryFormState.workToday == 1 ? undefined : 1
                  }"/>
            </a-form-item>
            <a-form-item label="单元状态">
              <a-select v-model:value="cellQueryFormState.status">
                <a-select-option
                    v-for="cellStatus in cellStatusDict.dict2"
                    :key="cellStatus.statusCode" :value="cellStatus.statusCode">
                  {{ cellStatus.statusName }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="审批状态">
              <a-select v-model:value="cellQueryFormState.checkStatus">
                <a-select-option
                    v-for="item in auditDict.dict"
                    :key="item.key" :value="item.key">
                  {{ auditDict.getValueByKey(item.key) }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="单元名称">
              <a-input v-model:value="cellQueryFormState.cellName"></a-input>
            </a-form-item>
            <a-form-item>
              <a-button @click="selectSectionClick" type="primary">查询</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="cell-table-box box-shadow">
        <div class="table-box-header">
          单元列表
        </div>
        <div class="table-box-center">
          <a-table
              :scroll="{y:setHeight('.table-box-center', 125) + 'px'}"
              :data-source="cellBaseInfoList.cellInfo"
              :rowKey="(record) => record.cellId"
              @change="getCellBaseInfoList"
              :pagination="{
                'current':cellBaseInfoList.startPage,
                'total':cellBaseInfoList.totalCount,
                'pageSize':cellBaseInfoList.everyPage,
                'showLessItems':true
              }">
            <a-table-column title="归属标段" data-index="sectionName"/>
            <a-table-column title="单元名称" data-index="cellName"/>
            <a-table-column title="工艺类型" data-index="kind" width="60px">
              <template #default="{text}" >
                {{ kindDict.getNameByCode(text) }}
              </template>
            </a-table-column>
            <a-table-column title="状态" data-index="checkStatus" width="60px">
              <template #default="{text}">
                <div :style="{color: auditDict.getColorByKey(text),border: '1px solid',borderRadius: '3px'}">
                  {{ auditDict.getValueByKey(text) }}
                </div>
              </template>
            </a-table-column>
            <a-table-column title="操作" data-index="cellId" width="60px">
              <template #default="{text,record}">
                <div class="icon-box">
                  <div @click="handleCell(record)">
                    <EditOutlined/>
                  </div>
                </div>
              </template>
            </a-table-column>
          </a-table>
        </div>
      </div>
    </div>
    <div class="right-box">
      <div class="base-info-box box-shadow">
        <a-descriptions :column="4">
          <a-descriptions-item label="单元名称" :span="1">
            {{inCellBaseInfo?inCellBaseInfo.cellName:'--'}}
          </a-descriptions-item>
          <a-descriptions-item label="创建时间" :span="1">
            {{inCellBaseInfo?inCellBaseInfo.gtmCreateTime:'--'}}
          </a-descriptions-item>
          <a-descriptions-item label="工艺类型" :span="1">
            {{inCellBaseInfo?kindDict.getNameByCode(inCellBaseInfo.kind):'--'}}
          </a-descriptions-item>
          <a-descriptions-item label="归属标段" :span="1">
            {{inCellBaseInfo?inCellBaseInfo.sectionName:'--'}}
          </a-descriptions-item>
          <a-descriptions-item label="区域面积" :span="1">
            {{inCellBaseInfo?inCellBaseInfo.area:'--'}}
          </a-descriptions-item>
          <a-descriptions-item label="创建账号" :span="1">
            {{inCellBaseInfo?inCellBaseInfo.userName:'--'}}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="report-box box-shadow">
        <div class="report-title">
          数据报表
          <div class="audit-box">
            <a-button @click="()=>{auditSetInfo.auditPut.showModal = true}" :disabled="!inCellBaseInfo && !$store.getters['userinfo/isPermission'](inCellBaseInfo?.sectionId,inCellBaseInfo?.kind,0)" type="primary">提交审核</a-button>
            <a-button @click="()=>{auditSetInfo.auditPermit.showModal = true}" :disabled="!inCellBaseInfo && !$store.getters['userinfo/isPermission'](inCellBaseInfo?.sectionId,inCellBaseInfo?.kind,1)" type="primary">审核通过</a-button>
            <a-button @click="()=>{auditSetInfo.auditReject.showModal = true}" :disabled="!inCellBaseInfo && !$store.getters['userinfo/isPermission'](inCellBaseInfo?.sectionId,inCellBaseInfo?.kind,1)" type="primary">审核驳回</a-button>
            <a-button @click="getAuditLog(inCellBaseInfo.cellId)" :disabled="!inCellBaseInfo && !$store.getters['userinfo/isPermission'](inCellBaseInfo?.sectionId,inCellBaseInfo?.kind,2)" type="primary">记录查看</a-button>
          </div>
        </div>
        <div class="report-search-box">
          <span>报表类型</span>
          <a-select v-model:value="reportSel"  @change="((val) => {changeSelectReport(val)})">
            <a-select-option :key="1" :value="1">位置图形报告</a-select-option>
            <a-select-option :key="2" :value="2" >深度图形报告</a-select-option>
            <a-select-option :key="3" :value="3" >倾斜度图形报告</a-select-option>
            <a-select-option :key="101" :value="101">验收报告</a-select-option>
            <a-select-option :key="202" :value="202">施工日报</a-select-option>
            <a-select-option :key="303" :value="303">施工数据</a-select-option>
          </a-select>
          <span v-if="isShowTimePicker" style="font-size: 14px; margin-left: 10px">时间：</span>
          <a-date-picker
              v-if="isShowTimePicker"
              format="YYYY-MM-DD"
              v-model:value="startValue"
          />
          <a-button @click="getReport(inCellBaseInfo.cellId,reportSel)" :disabled="!inCellBaseInfo" type="primary">查询</a-button>
        </div>
        <div class="report-center">
          <div v-if="reportType < 100" class="img-container">
            <a-image
                v-if="reportImg"
                width="940px"
                height="530px"
                :src="reportImg"/>
          </div>
          <div v-if="reportType > 100 && reportType < 200" id="receiving-report" class="receiving-report">
            <div class="title"><a-image class="logo" :width="16" :height="16" :src="logo"/><span>验收报告</span></div>
            <a-descriptions :column="4" bordered>
              <!-- cement-修改 -->
              <a-descriptions-item label="工程名称" :span="2">{{ receivingReport?receivingReport.projectName:"--" }}</a-descriptions-item>
              <a-descriptions-item label="报告生成时间" :span="2">{{ receivingReport?receivingReport.gtmTime:"--" }}</a-descriptions-item>
              <a-descriptions-item label="施工单位名称" :span="2">{{ receivingReport?receivingReport.buildName:"--" }}</a-descriptions-item>
              <a-descriptions-item label="监理单位名称" :span="2">{{ receivingReport?receivingReport.supervisorName:"--" }}</a-descriptions-item>
              <a-descriptions-item label="施工单元名称" :span="2">{{ receivingReport?receivingReport.cellName:"--" }}</a-descriptions-item>
              <a-descriptions-item label="单元面积" :span="2">{{ receivingReport?receivingReport.area:"--" }}㎡</a-descriptions-item>
              <a-descriptions-item label="施工开始时间" :span="2">{{ receivingReport?receivingReport.startTime:"--" }}</a-descriptions-item>
              <a-descriptions-item label="施工结束时间" :span="2">{{ receivingReport?receivingReport.endTime:"--" }}</a-descriptions-item>
            </a-descriptions>
            <a-descriptions title="设计信息" :column="4" bordered>
              <!-- cement-修改 -->
              <a-descriptions-item label="设计施工桩数" :span="2">{{ receivingReport?receivingReport.totleCountDesign:"--" }}根</a-descriptions-item>
              <a-descriptions-item label="设计深度" :span="2">{{ receivingReport?receivingReport.depthDesign:"--" }}m</a-descriptions-item>
              <a-descriptions-item label="单桩搅拌次数" :span="2">{{ receivingReport?receivingReport.mixCountDesign:"--" }}次</a-descriptions-item>
              <a-descriptions-item label="单桩喷浆次数" :span="2">{{ receivingReport?receivingReport.shootCountDesign:"--" }}次</a-descriptions-item>
              <a-descriptions-item label="单桩搅拌升降速度" :span="2">{{ receivingReport?receivingReport.mixSpeedDesign:"--" }}m/s</a-descriptions-item>
              <a-descriptions-item label="单桩喷浆升降速度" :span="2">{{ receivingReport?receivingReport.shootSpeedDesign:"--" }}m/s</a-descriptions-item>
            </a-descriptions>
            <a-descriptions title="施工信息" :column="4" bordered>
              <!-- cement-修改 -->
              <a-descriptions-item label="施工总桩数" :span="4">{{ receivingReport?receivingReport.totleCount:"--" }}根</a-descriptions-item>
              <a-descriptions-item label="平均桩深" :span="2">{{ receivingReport?receivingReport.avgDepth:"--" }}m</a-descriptions-item>
              <a-descriptions-item label="深度符合设计比例" :span="2">{{ receivingReport?receivingReport.ratioDepth:"--" }}%</a-descriptions-item>
              <a-descriptions-item label="平均倾斜度" :span="2">{{ receivingReport?receivingReport.avgGradient:"--" }}</a-descriptions-item>
              <a-descriptions-item label="倾斜度符合设计比例" :span="2">{{ receivingReport?receivingReport.ratioGradient:"--" }}%</a-descriptions-item>
              <a-descriptions-item label="单桩搅拌次数符合设计比例" :span="2">{{ receivingReport?receivingReport.ratioMixCount:"--" }}%</a-descriptions-item>
              <a-descriptions-item label="单桩喷浆次数符合设计比例" :span="2">{{ receivingReport?receivingReport.ratioShootCount:"--" }}%</a-descriptions-item>
              <a-descriptions-item label="平均搅拌升降速度" :span="2">{{ receivingReport?receivingReport.avgMixSpeed:"--" }}m/s</a-descriptions-item>
              <a-descriptions-item label="单桩搅拌升降速度符合设计比例" :span="2">{{ receivingReport?receivingReport.ratioMixSpeed:"--" }}%</a-descriptions-item>
              <a-descriptions-item label="平均喷浆升降速度" :span="2">{{ receivingReport?receivingReport.avgShootSpeed:"--" }}m/s</a-descriptions-item>
              <a-descriptions-item label="单桩喷浆升降速度符合设计比例" :span="2">{{ receivingReport?receivingReport.ratioShootSpeed:"--" }}%</a-descriptions-item>
            </a-descriptions>
          </div>

          <div v-if="reportType > 200 && reportType < 300" id="work-report" class="work-report">
            <div class="title"><a-image class="logo" :width="16" :height="16" :src="logo"/><span>施工日报</span></div>
            <a-descriptions :column="4" bordered>
              <!-- cement-修改 -->
              <a-descriptions-item label="工程名称" :span="2">{{ receivingReport?receivingReport.projectName:"--" }}</a-descriptions-item>
              <a-descriptions-item label="报告生成时间" :span="2">{{ receivingReport?receivingReport.gtmTime:"--" }}</a-descriptions-item>
              <a-descriptions-item label="施工单位名称" :span="2">{{ receivingReport?receivingReport.buildName:"--" }}</a-descriptions-item>
              <a-descriptions-item label="监理单位名称" :span="2">{{ receivingReport?receivingReport.supervisorName:"--" }}</a-descriptions-item>
              <a-descriptions-item label="施工单元名称" :span="2">{{ receivingReport?receivingReport.cellName:"--" }}</a-descriptions-item>
              <a-descriptions-item label="单元面积" :span="2">{{ receivingReport?receivingReport.area:"--" }}平方米</a-descriptions-item>
              <a-descriptions-item label="施工开始时间" :span="2">{{ receivingReport?receivingReport.startTime:"--" }}</a-descriptions-item>
              <a-descriptions-item label="施工结束时间" :span="2">{{ receivingReport?receivingReport.endTime:"--" }}</a-descriptions-item>
            </a-descriptions>
            <a-descriptions title="设计信息" :column="4" bordered>
              <!-- cement-修改 -->
              <a-descriptions-item label="设计施工桩数" :span="2">{{ receivingReport?receivingReport.totleCountDesign:"--" }}根</a-descriptions-item>
              <a-descriptions-item label="设计深度" :span="2">{{ receivingReport?receivingReport.depthDesign?.toFixed(2):"--" }}米</a-descriptions-item>
            </a-descriptions>
            <a-descriptions title="施工信息" :column="4" bordered>
              <!-- cement-修改 -->
              <a-descriptions-item label="施工总桩数" :span="2">{{ receivingReport?receivingReport.totleCount:"--" }}根</a-descriptions-item>
              <a-descriptions-item label="平均桩深" :span="2">{{ receivingReport?receivingReport.avgDepth?.toFixed(2):"--" }}米</a-descriptions-item>
            </a-descriptions>
            <a-descriptions title="机械施工统计" :column="4" :bordered ="receivingReport? (receivingReport.deviceInfo.length>0? true: false): false" >
              <a-descriptions-item  :label=item.deviceName :span="4" v-for="item in receivingReport? receivingReport.deviceInfo: []">{{ `钻工${item.totleCount}根 深度${item.totleDepth?.toFixed(2)}米 平均深度${item.avgDepth?.toFixed(2)}米` }}</a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
        <div  class="report-footer">
          <a-button @click="createTiledMap(inCellBaseInfo.cellId)" :disabled="!inCellBaseInfo||!reportImg">重新生成</a-button>
          <a-button @click="exportReport" :disabled="!inCellBaseInfo" type="primary">导出</a-button>
        </div>
      </div>
    </div>
  </div>
  <SModal
      title="提交审核"
      :width="450"
      :height="465"
      :is-show="auditSetInfo.auditPut.showModal"
      @closed="()=>{auditSetInfo.auditPut.showModal = false}">
    <div class="audit-set-box">
      <a-alert message="注意" type="info" show-icon>
        <template #description>
          1.请将施工单元内机械结束派遣后进行提交；<br/>
          2.审核阶段和审核通过后将无法修改施工单元参数；<br/>
          3.审核驳回后可继续修改施工单元参数；
        </template>
      </a-alert>
      <div class="audit-set-form-box">
        <a-form :labelCol="{style: 'width: 80px'}">
          <a-form-item label="归属标段">
            {{ inCellBaseInfo?inCellBaseInfo.sectionName:"" }}
          </a-form-item>
          <a-form-item label="单元名称">
            {{ inCellBaseInfo?inCellBaseInfo.cellName:"" }}
          </a-form-item>
          <a-form-item label="工艺">
            {{ inCellBaseInfo?kindDict.getNameByCode(inCellBaseInfo.kind):"" }}
          </a-form-item>
          <a-form-item label="状态">
            {{ inCellBaseInfo?auditDict.getValueByKey(inCellBaseInfo.checkStatus):"" }}
          </a-form-item>
          <a-form-item label="备注" :wrapperCol="{span:18}">
            <a-textarea
                v-model:value="auditSetInfo.auditPut.submitInfo.remark"
                :auto-size="{minRows: 2, maxRows: 5}"/>
          </a-form-item>
          <a-form-item class="audit-set-btn-bar">
            <a-button @click="commitCheck(inCellBaseInfo?.cellId,auditSetInfo.auditPut.submitInfo.remark)" type="primary">
              提交
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </SModal>
  <SModal
      title="审核通过"
      :width="450"
      :height="465"
      :is-show="auditSetInfo.auditPermit.showModal"
      @closed="()=>{auditSetInfo.auditPermit.showModal = false}">
    <div class="audit-set-box">


      <a-alert message="注意" type="info" show-icon>
        <template #description>
          1.请将施工单元内机械结束派遣后进行提交；<br/>
          2.审核阶段和审核通过后将无法修改施工单元参数；<br/>
          3.审核驳回后可继续修改施工单元参数；
        </template>
      </a-alert>
      <div class="audit-set-form-box">
        <a-form :labelCol="{style: 'width: 80px'}">
          <a-form-item label="归属标段">
            {{ inCellBaseInfo?inCellBaseInfo.sectionName:"" }}
          </a-form-item>
          <a-form-item label="单元名称">
            {{ inCellBaseInfo?inCellBaseInfo.cellName:"" }}
          </a-form-item>
          <a-form-item label="工艺">
            {{ inCellBaseInfo?kindDict.getNameByCode(inCellBaseInfo.kind):"" }}
          </a-form-item>
          <a-form-item label="状态">
            {{ inCellBaseInfo?auditDict.getValueByKey(inCellBaseInfo.checkStatus):"" }}
          </a-form-item>
          <a-form-item label="备注" :wrapperCol="{span:18}">
            <a-textarea
                v-model:value="auditSetInfo.auditPermit.submitInfo.remark"
                :auto-size="{minRows: 2, maxRows: 5}"/>
          </a-form-item>
          <a-form-item class="audit-set-btn-bar">
            <a-button @click="commitPermit(inCellBaseInfo?.cellId,auditSetInfo.auditPermit.submitInfo.remark)" type="primary">
              提交
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </SModal>
  <SModal
      title="审核驳回"
      :width="450"
      :height="465"
      :is-show="auditSetInfo.auditReject.showModal"
      @closed="()=>{auditSetInfo.auditReject.showModal = false}">
    <div class="audit-set-box">
      <a-alert message="注意" type="info" show-icon>
        <template #description>
          1.请将施工单元内机械结束派遣后进行提交；<br/>
          2.审核阶段和审核通过后将无法修改施工单元参数；<br/>
          3.审核驳回后可继续修改施工单元参数；
        </template>
      </a-alert>
      <div class="audit-set-form-box">
        <a-form
            :labelCol="{style: 'width: 80px'}">
          <a-form-item label="归属标段">
            {{ inCellBaseInfo?inCellBaseInfo.sectionName:"" }}
          </a-form-item>
          <a-form-item label="单元名称">
            {{ inCellBaseInfo?inCellBaseInfo.cellName:"" }}
          </a-form-item>
          <a-form-item label="工艺">
            {{ inCellBaseInfo?kindDict.getNameByCode(inCellBaseInfo.kind):"" }}
          </a-form-item>
          <a-form-item label="状态">
            {{ inCellBaseInfo?auditDict.getValueByKey(inCellBaseInfo.checkStatus):"" }}
          </a-form-item>
          <a-form-item label="备注" :wrapperCol="{span:18}">
            <a-textarea
                v-model:value="auditSetInfo.auditReject.submitInfo.remark"
                :auto-size="{ minRows: 2, maxRows: 5 }"/>
          </a-form-item>
          <a-form-item class="audit-set-btn-bar">
            <a-button @click="commitReject(inCellBaseInfo?.cellId,auditSetInfo.auditReject.submitInfo.remark)" type="primary">
              提交
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </SModal>
  <SModal
      title="审核记录"
      width="460"
      :is-show="auditSetInfo.auditLogModal"
      @closed="()=>{auditSetInfo.auditLogModal = false}">
    <div class="log-box">
      <a-table
          :scroll="{y:`240px`}"
          :data-source="auditSetInfo.auditList"
          :rowKey="(record) => record.gtmCreate"
          :pagination="false">
        <a-table-column title="操作" data-index="kind"/>
        <a-table-column title="时间" data-index="gtmCreate"/>
        <a-table-column title="账号" data-index="userName"/>
        <a-table-column title="备注" data-index="content"/>
      </a-table>
    </div>
  </SModal>
</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, ref, toRefs} from "vue";
import { useStore } from "vuex";
import { setHeight } from '@/utils/tableUtils'
import { cellBaseInfo } from '@/hooks/cell/index'
import kindDict from '@/dicts/kindDict'
import cellStatusDict from '@/dicts/cellStatusDict'
import auditDict from '@/dicts/auditDict'
import { EditOutlined } from '@ant-design/icons-vue'
import SModal from "@/components/SModal/index.vue";
import axios from "@/utils/axios";
import qs from "qs";
import { message } from "ant-design-vue";
import { Base64ToPng } from "@/utils/tyutils/index"
import { Html2Pdf, Throttle } from "@/utils/tyutils/index"
import logo from "@/assets/image/logo2.png"
import moment, {Moment} from "moment";

interface AuditInfo {
  showModal: false
  submitInfo: {
    cellId: number | null
    remark: string | null
  }
}

export default defineComponent({
  setup() {
    const store = useStore()
    const sections = ref(JSON.parse(JSON.stringify(store.getters["userinfo/getUserSection"])))
    let isRedrawKind = ref(false)
    let isRedrawAction = ref(false)
    let cellName = ref("")
    let fristrequest = ref(true)
    let isShowTimePicker = ref(false)

    const {
      cellQueryFormRef, cellQueryFormState, cellBaseInfoList, inCellBaseInfo,
      getCellBaseInfoList, setCellStatus, getCellBaseInfo
    } = cellBaseInfo()


    const startValue = ref<Moment | undefined>();

    const reportInfo = reactive({
      reportSel: 1,
      reportType: 1,
      reportFileType: 'img',
      reportImg: <any>null,
      receivingReport: <any>null
    })
    const auditSetInfo = reactive({
      auditPut: <AuditInfo>{
        showModal: false,
        submitInfo: {
          cellId: null,
          remark: null
        }
      },
      auditPermit: <AuditInfo>{
        showModal: false,
        submitInfo: {
          cellId: null,
          remark: null
        }
      },
      auditReject: <AuditInfo>{
        showModal: false,
        submitInfo: {
          cellId: null,
          remark: null
        }
      },
      auditLogModal: false,
      auditList: new Array()
    })

    // 获取报告
    const getReport = (cellId: number, workType: number) => {
      fristrequest.value = false
      reportInfo.reportImg = null
      reportInfo.receivingReport = null;
      reportInfo.reportType = workType
      switch (workType) {
        case 101:   //cement-修改接口---已修改
        {
          axios.post("/cement/findAnalysisReport",{cellId:cellId}).then((res:any)=>{
            if(res.success){
              reportInfo.receivingReport = res.data
            }else{
              message.info(res.msg)
            }
          })
        }
          break;
        case 303:
          axios.post("cement/downloadBuildPoint", {cellId: cellId, kind: 1},
              {responseType: 'blob'}).then((res:any)=>{
            // 前端获取业务码，成功执行正常业务
            const link = document.createElement('a');
            link.target = "_blank";
            link.href = URL.createObjectURL(res); // 创建下载的链接
            link.download = `${inCellBaseInfo.value.cellName}.xlsx`; // 下载后文件名
            link.click(); // 点击下载
            URL.revokeObjectURL(link.href); // 释放掉blob对象
            document.body.removeChild(link); // 下载完成移除元素
          })
          break;
        case 202:   //cement-修改接口---已修改
        {
         let startTime = exchangeTime(startValue.value) ? exchangeTime(startValue.value).substring(0, 10): ""
          axios.post("/cement/findWorkReportDaily",{cellId:cellId,startTime:startTime}).then((res:any)=>{
            if(res.success){
              reportInfo.receivingReport = res.data
            }else{
              message.info(res.msg)
            }
          })
        }
          break;
        default:  //cement-修改接口---已修改
          axios.post("/jbzMap/reporter",qs.stringify({cellID:cellId,workType}),{
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            responseType:"arraybuffer"
          }).then((res:any)=>{
            reportInfo.reportImg = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
          }).catch((err:any)=>{
            message.info("暂未施工")
          })
      }
    }
    // 后端绘制报告
    const createTiledMap = Throttle((cellId:number)=>{
      // fristrequest.value ==true 点击查询按钮之前点击了   // if (fristrequest.value != true) {
      //   if(isRedrawAction.value != true) {
      //     let str = `施工单元 ${cellName.value} 已进入报告生成队列，请稍后查阅！`
      //     message.info(str)
      //     return;
      //   }
      // }else {
      //   message.info("请点击查询按钮生成报告")
      //   return;
      // }重新生成 可以去请求

      axios.post("/jbzMap/reCreatReport",  //  cement-修改接口---已修改
          qs.stringify({
            cellID:cellId,
            workType:reportInfo.reportType,
          }),{
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          }).then((res:any)=>{
        if(res.success){
          getReport(inCellBaseInfo.value.cellId,reportInfo.reportType)
          message.info("重新生成成功")
        }else{
          message.info("重新生成失败")
        }
      })
    },5)

    const exchangeTime = (dateForm :any)=> {

        if (dateForm === "") {  //解决deteForm为空传1970-01-01 00:00:00
          return "";
        } else {
          var dateee = new Date(dateForm).toJSON();
          var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
          return date;
        }
    }

    // 导出报告
    const exportReport = ()=>{
      switch (reportInfo.reportType) {
        case 1:
          if(!reportInfo.reportImg){
            message.info("暂未施工")
            return
          }
          Base64ToPng(reportInfo.reportImg)
          break
        case 2:
          if(!reportInfo.reportImg){
            message.info("暂未施工")
            return
          }
          Base64ToPng(reportInfo.reportImg)
          break
        case 3:
          if(!reportInfo.reportImg){
            message.info("暂未施工")
            return
          }
          Base64ToPng(reportInfo.reportImg)
          break
        case 101:
          Html2Pdf("receiving-report",inCellBaseInfo.value.sectionName)
          break
        case 202:
          Html2Pdf("work-report",inCellBaseInfo.value.sectionName)
          break
        default:
          break
      }
    }

    const handleCell = (cell: any) => {
      getCellBaseInfo(cell)
    }

    // 提交审核
    const commitCheck = (cellId:number,content:string)=>{
      axios.post("/common/commitCheck",{
        cellId: cellId,
        content: content
      }).then((res:any)=>{
        if(res.success){
          let cell = cellBaseInfoList.value.cellInfo.find((item:any)=>{
            return item.cellId === cellId
          })
          if(cell){
            cell.checkStatus = 1
          }
          message.info("提交成功")
          auditSetInfo.auditPut.showModal = false
        }else{
          message.info(res.msg)
        }
      })
    }
    // 通过审核
    const commitPermit = (cellId:number,content:string)=>{
      axios.post("/common/passCheck",{
        cellId: cellId,
        content: content
      }).then((res:any)=>{
        if(res.success){
          let cell = cellBaseInfoList.value.cellInfo.find((item:any)=>{
            return item.cellId === cellId
          })
          if(cell){
            cell.checkStatus = 3
          }
          message.info("提交成功")
          auditSetInfo.auditPermit.showModal = false
        }else{
          message.info(res.msg)
        }
      })
    }
    // 驳回审核
    const commitReject = (cellId:number,content:string)=>{
      axios.post("/common/dismissCheck",{
        cellId: cellId,
        content: content
      }).then((res:any)=>{
        if(res.success){
          let cell = cellBaseInfoList.value.cellInfo.find((item:any)=>{
            return item.cellId === cellId
          })
          if(cell){
            cell.checkStatus = 2
          }
          message.info("提交成功")
          auditSetInfo.auditReject.showModal = false
        }else{
          message.info(res.msg)
        }
      })
    }
    // 获取审核记录
    const getAuditLog = (cellId: number) => {
      axios
          .post('/common/findCheck', {
            cellId: cellId
          })
          .then((res: any) => {
            if (res.success) {
              auditSetInfo.auditList = res.data
              auditSetInfo.auditLogModal = true
            } else {
              message.info(res.msg)
            }
          })
    }

    const  changeSelect = (val:any)=>{
      let sectionsAry = sections.value
      if (val>=1){
        let selectDict = sectionsAry[val-1]
        let craftAry = selectDict["craft"]
        for (let i = 0; i <craftAry.length; i++) {
          let craftDict = craftAry[i]
          if (craftDict["kind"] == 23){
            isRedrawKind.value = true
          }
        }
      }
    }

    const changeSelectReport = (val:any)=>{
      if (val == 202){
        isShowTimePicker.value = true
      }else {
        isShowTimePicker.value = false
      }
    }
    const selectSectionClick =()=>{
      isRedrawAction.value = isRedrawKind.value
      getCellBaseInfoList(null)
    }

    onMounted(() => {
      if (sections.value.length > 0) {
        cellQueryFormState.value.sections[0].sectionId = sections.value[0].sectionId
        cellQueryFormState.value.sections[0].kind = [22]

        let sectionsAry = sections.value
        let selectDict = sectionsAry[0]
        let craftAry = selectDict["craft"]
        for (let i = 0; i <craftAry.length ; i++) {
          let craftDict = craftAry[i]
          if (craftDict["kind"]==23){
            isRedrawKind.value = true
            isRedrawAction.value =true
          }else {
            console.log(craftDict["kind"])
          }
        }

        getCellBaseInfoList(null)
      }
    })

    return {

      ranges: {
        近七日: [
          moment()
              .startOf('day')
              .subtract(1, 'weeks'),
          moment()
        ],
        本月: [moment().startOf('month'), moment()]
      },
      moment,
      setHeight,
      logo,
      sections,
      kindDict,
      cellStatusDict,
      auditDict,
      ...toRefs(reportInfo),
      auditSetInfo,

      getReport,
      createTiledMap,
      exportReport,

      handleCell,

      commitCheck,
      commitPermit,
      commitReject,
      getAuditLog,

      cellQueryFormRef,
      cellQueryFormState,
      cellBaseInfoList,
      inCellBaseInfo,
      getCellBaseInfoList,
      setCellStatus,
      getCellBaseInfo,

      selectSectionClick,
      changeSelectReport,
      //下拉时判断
      isRedrawKind,
      //查询时赋值判断
      isRedrawAction,
      isShowTimePicker,
      startValue


    }
  },
  components: { EditOutlined, SModal }
})
</script>

<style scoped lang="scss">

.monitor-box {
  display: flex;
  width: 100%;
  height: 100%;
  .left-box {
    display: flex;
    flex-direction: column;
    width: 360px;
    height: 100%;
    .control-box {
      display: flex;
      width: 100%;
      height: 312px;
      .search-box {
        width: 360px;
        height: 100%;
        padding: 12px 17px;
        box-sizing: border-box;
        ::v-deep label {
          color: #666666;
        }
        ::v-deep .ant-form-item {
          display: flex;
          margin-bottom: 10px;
        }
        ::v-deep .ant-form-item-control-wrapper {
          flex: 1;
        }
        ::v-deep .ant-select {
          width: 100%;
        }
      }
    }
    .cell-table-box {
      display: flex;
      flex-direction: column;
      width: 360px;
      flex: 1;
      margin-top: 20px;
      padding: 0 13px;
      .table-box-header {
        color: #333333;
        font-size: 18px;
        font-weight: bold;
        padding: 18px 0 10px 10px;
      }
      .table-box-center {
        width: 100%;
        flex: 1;
      }
    }
  }
  .right-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    margin-left: 20px;
    .base-info-box {
      width: 100%;
      height: 82px;
      padding: 14px 0 2px;
    }
    .report-box {
      display: flex;
      flex-direction: column;
      width: 100%;
      flex: 1;
      margin-top: 20px;
      .report-title{
        display: flex;
        color: #333333;
        font-size: 18px;
        font-weight: bold;
        padding: 18px 0 10px 34px;
        border-bottom: 1px solid #EDF0FB;
        .audit-box{
          flex: 1;
          display: flex;
          padding: 0 34px;
          justify-content: flex-end;
          ::v-deep >button{
            margin-left: 20px;
          }
        }
      }
      .report-search-box{
        flex-direction: row;
        padding: 18px 34px;
        >span{
          color: #666666;
          font-size: 14px;
          font-weight: bold;
          line-height: 32px;
          font-family: 'PingFangSC-Medium, PingFang SC';
        }
        ::v-deep .ant-select{
          width: 240px;
          margin: 0 8px;
        }

        //.pb-header-box {
        //  margin-top: 15px;
        //  height: 50px;
        //}
        ::v-deep button{
          margin-left: 80px;
        }
      }
      .report-center{
        display: flex;
        justify-content: center;
        width: 100%;
        height: 530px;
        overflow-y: auto;
        align-items: center;
        flex: 1;
        .img-container{
          width: 940px;
          height: 530px;
        }
        .receiving-report{
          width: 100%;
          height: 518px;
          padding: 14px 34px;
          box-sizing: border-box;
          .title{
            display: flex;
            justify-content: center;
            align-content: center;
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 8px;
            line-height: 25px;
            text-align: center;
          }
          ::v-deep .ant-image{
            margin-top: -1.5px;
            margin-left: -4px;
            margin-right: 4px;
          }
          ::v-deep .ant-descriptions-title{
            margin-top: 20px;
            //text-align: center;
          }
        }
        .work-report{
          width: 100%;
          height: 518px;
          padding: 14px 34px;
          box-sizing: border-box;
          .title{
            display: flex;
            justify-content: center;
            align-content: center;
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 8px;
            line-height: 25px;
            text-align: center;
          }
          ::v-deep .ant-image{
            margin-top: -1.5px;
            margin-left: -4px;
            margin-right: 4px;
          }
          ::v-deep .ant-descriptions-title{
            margin-top: 20px;
            //text-align: center;
          }
        }
        .table-container{
          width: 1100px;
          height: 530px;
        }
      }
      .report-footer{
        display: flex;
        justify-content: flex-end;
        padding: 16px 34px;
        height: 64px;
        ::v-deep button{
          margin-left: 8px;
        }
      }
    }
  }
}
.audit-set-box{
  position: absolute;
  width: 100%;
  height: 376px;
  left: 0;
  ::v-deep .ant-alert-with-description{
    padding: 8px;
  }
  .audit-set-form-box{
    width: 100%;
    padding: 8px 24px;
    ::v-deep .ant-form{
      color: #666666;
    }
    ::v-deep .ant-form-item{
      margin-bottom: 0;
    }
    .audit-set-btn-bar{
      display: flex;
      justify-content: flex-end;
      margin-top: 15px;
    }
  }
}
</style>
